<script setup>
import { ref, reactive, onMounted } from "vue"
import SendOut from "./SendOut/index.vue"
import CheckPro from "./CheckPro/index.vue"
const olWrap = ref()
const height = ref(0)
const params = reactive({
  orderNo: "",
  state: "",
  business: "",
  isFeedBack: '',
  start: '',
  end: ''
})
const visiableSendOut = ref(false)
const visiableCheckPro = ref(false)
const choose = reactive({ value: {} })
const dateValue = ref([])
const stateOptions = ref([{
  value: '0',
  label: '待支付'
}, {
  value: '1',
  label: '待发货'
}, {
  value: '2',
  label: '待收货'
}, {
  value: '3',
  label: '已完成'
}])
const feedBackOptions = ref([{
  value: '0',
  label: '否'
}, {
  value: '1',
  label: '是'
}, {
  value: '2',
  label: '已处理'
}])
const businessOptions = ref([])
const settlementOptions = ref([{
  value: '0',
  label: '不可结算'
}, {
  value: '1',
  label: '可结算'
}, {
  value: '2',
  label: '已结算'
}])
const tableData = ref([
  {
    id: 1,
    orderId: "1231",
    businessName: "商家1",
    consignor: "13032378562",
    consignorAddress: "重庆市九龙坡区冶金路2号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
    ],
    isFeedBack: '0',
    feedBackMessage: '',
    state: '0',
    feeState: '0'
  },
  {
    id: 2,
    orderId: "1232",
    businessName: "商家1",
    consignor: "13368169072",
    consignorAddress: "重庆市渝北区湖红路恒大世纪城",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
    ],
    isFeedBack: '0',
    feedBackMessage: '',
    state: '1',
    feeState: '0'
  },
  {
    id: 3,
    orderId: "1233",
    businessName: "商家1",
    consignor: "15802340766",
    consignorAddress: "重庆市两江新区太湖中路53号附71号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '申通快递',
        no: '776001682890196'
      }
    ],
    isFeedBack: '0',
    feedBackMessage: '',
    state: '2',
    feeState: '0'
  },
  {
    id: 4,
    orderId: "1234",
    businessName: "商家1",
    consignor: "18203089779",
    consignorAddress: "重庆市巴南区燕尾山路898号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '韵达',
        no: '312098513062030'
      }
    ],
    isFeedBack: '2',
    feedBackMessage: '测试问题',
    state: '3',
    feeState: '0'
  },
  {
    id: 5,
    orderId: "1235",
    businessName: "商家1",
    consignor: "18225162013",
    consignorAddress: "重庆市九龙坡区科园四路170号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '圆通',
        no: 'YT5270796465522'
      }
    ],
    isFeedBack: '0',
    feedBackMessage: '',
    state: '3',
    feeState: '1'
  },
  {
    id: 6,
    orderId: "1236",
    businessName: "商家1",
    consignor: "13541224047",
    consignorAddress: "重庆市九龙坡区科园四路100号",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '顺丰',
        no: 'SF254227178797'
      }
    ],
    isFeedBack: '1',
    feedBackMessage: '收到货的时候，发现货里面只有箱子，没看到货品，就好像收到货了但没有收到货',
    state: '3',
    feeState: '2'
  },
  {
    id: 7,
    orderId: "1237",
    businessName: "商家1",
    consignor: "18916970204",
    consignorAddress: "重庆市渝北区翠苹路海德盛世-A区",
    createDate: '2024-08-06 19:02:56',
    tradePrice: '4000',
    expressList: [
      {
        company: '顺丰',
        no: 'SF1623589400417'
      },
      {
        company: '京东',
        no: 'JD0154007531494'
      }
    ],
    isFeedBack: '0',
    feedBackMessage: '',
    state: '2',
    feeState: '0'
  },
])
onMounted(() => {
  height.value = olWrap.value.offsetHeight - 52 - 20
})

const gotoSendOut = (row) => {
  choose.value = row
  visiableSendOut.value = true
}

const gotoCheck = row => {
  choose.value = row
  visiableCheckPro.value = true
}
</script>

<template>
  <div class="ol-wrap" ref="olWrap">
    <div class="search">
      <el-input v-model="params.business" style="width: 180px;margin-right: 10px" placeholder="请输入订单号查询" />
      <el-select v-model="params.business" placeholder="请选择商家" style="width: 180px;margin-right: 10px">
        <el-option v-for="item in businessOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="params.state" placeholder="请选择状态" style="width: 180px;margin-right: 10px">
        <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="params.isFeedBack" placeholder="是否反馈问题" style="width: 180px;margin-right: 10px">
        <el-option v-for="item in feedBackOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-date-picker style="margin-right: 10px;" v-model="dateValue" type="daterange" range-separator="至"
        start-placeholder="起始时间" end-placeholder="截止时间" />
      <el-button type="primary">查询</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%" :height="height">
        <el-table-column prop="orderId" label="订单号" width="180" />
        <el-table-column prop="businessName" label="商家名称" width="180" />
        <el-table-column prop="consignor" label="买家" width="180" />
        <el-table-column prop="consignorAddress" label="收货地址" width="220" show-overflow-tooltip />
        <el-table-column prop="createDate" label="创建时间" width="180" />
        <el-table-column prop="tradePrice" label="交易金额(金额)" width="90" />
        <el-table-column label="物流单号" width="200">
          <template #default="scope">
            <template v-if="scope.row.expressList.length > 0">
              <div style="width: 100%;height: 100%;overflow-x: hidden;">
                <div v-for="(el, index) in scope.row.expressList" :key="index">{{ el.company + "-" }}
                  <el-tooltip class="box-item" effect="dark" content="点击复制单号" placement="top-start">
                    <el-link type="primary">{{ el.no }}</el-link>
                  </el-tooltip>
                  {{ index < scope.row.expressList.length - 1 ? ',' : '' }}</div>
                </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="isFeedBack" label="是否反馈问题" width="110">
          <template #default="scope">
            <template v-if="scope.row.isFeedBack == '0'">否</template>
            <template v-else-if="scope.row.isFeedBack == '1'">
              <el-button link type="warning" @click="gotoCheck(scope.row)">查看</el-button>
            </template>
            <template v-else>已处理</template>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="80">
          <template #default="scope">
            {{ stateOptions.find(so => so.value === scope.row.state).label }}
          </template>
        </el-table-column>
        <el-table-column prop="feeState" label="结算状态" width="100">
          <template #default="scope">
            {{ settlementOptions.find(so => so.value === scope.row.feeState).label }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button v-if="scope.row.state === '1'" link type="primary" @click="gotoSendOut(scope.row)">
              发货
            </el-button>
            <el-button v-if="scope.row.state === '2'" link type="primary">确认收货</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <send-out :visiable="visiableSendOut" :choose="choose.value" @close="visiableSendOut = false" />
  <check-pro :visiable="visiableCheckPro" :choose="choose.value" @close="visiableCheckPro = false"
    @sendOut="gotoSendOut(choose.value)" />
</template>

<style scoped>
.ol-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
}

.search {
  padding: 10px;
}

.table {
  margin: 0 10px;
}
</style>